<template>
  <!-- 检查记录 -- 申诉说明 -->
  <view class="complaintThat">
    <view class="content">
      <view class="content-item">
        <view class="deal-title">文字说明：</view>
        <view class="thein-area">
          <u--textarea v-model="companyContent" placeholder="请简要说明整改情况" count maxlength="50" height="135"></u--textarea>
        </view>

        <view class="deal-title">图片说明：
          <text>（最多可上传3张图片，非必填）</text>
        </view>

        <view class="upload-view">
          <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="file" :maxCount="3"
            :multiple="true" width="102" height="90">
            <image :src="baseImgUrl + 'upload-icon.png'" style="width: 204rpx; height: 180rpx"></image>
          </u-upload>
        </view>
      </view>
    </view>

    <view class="btns">
      <button class="reset-btn lt cancelBtn" type="primary" @click="resethandle">
        取消
      </button>
      <button class="submit-btn" type="primary" @click="submitHandle">
        确认
      </button>
    </view>
  </view>
</template>

<script>
  import {
    companyComplainComplain
  } from "@/api/goover.js";
  import {
    Toast,
    getHeader,
    isLoading,
    navBack,
    uniTrim,
    uploadFile
  } from "@/utils/util.js";

  export default {
    name: " complaintThat",
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        baseURL: this.$baseURL,
        options: {},
        companyContent: "",
        imageList: [],
        fileList: [],
      };
    },
    onLoad(options) {
      this.options = options;
    },
    methods: {
      afterRead(info) {
        let _this = this;
        for (let v of info.file) {
          uploadFile({
              url: "/web/sys/upload/upload_file",
              filePath: v.url,
              name: "file",
              formData: {
                type: 11,
              },
            })
            .then((res) => {
              let {
                fullPath,
                halfPath
              } = res.result;
              this.fileList.push({
                url: fullPath
              });
              this.imageList.push(halfPath);
            })
            .finally(() => {

            })
        }
      },
      deletePic(e) {
        this.fileList.splice(e.index, 1);
        this.imageList.splice(e.index, 1);
      },
      resethandle() {
        uni.navigateBack();
      },
      submitHandle() {
        if (!this.companyContent || !uniTrim(this.companyContent)) {
          Toast("请填写文字说明");
          return;
        }

        let data = {
          policeCheckTaskId: this.options.id,
          companyContent: this.companyContent,
          imageList: this.imageList,
        };
        companyComplainComplain(data).then((res) => {
          if (res.code == 200) {
            Toast("申诉成功");
            navBack("back", 2);
          } else {}
        });
      },
    },
  };
</script>

<style lang="scss">
  .complaintThat {
    flex: 1;
    background-color: #f9f9f9;

    .content {
      margin: 0 auto;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 8rpx;
      width: calc(100% - 35rpx);
      height: calc(100vh - 84px);
      overflow-y: auto;

      .content-item {
        padding: 25rpx;
        background: #fff;

        .deal-title {
          padding: 20rpx 0;
          color: #000000;
          font-size: 30rpx;
          font-weight: 500;

          text {
            color: #a1a1a1;
            font-size: 26rpx;
          }
        }

        .thein-area {
          font-size: 28rpx;

          .u-textarea--radius,
          .u-textarea__count {
            background: #f9f9f9 !important;
          }

          .u-textarea__field {
            font-size: 28rpx;
          }
        }
      }
    }
  }
</style>